import React, { Component } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Image,
  findNodeHandle,
  YellowBox,
  SectionList,
  StatusBar
} from 'react-native';
import { Actions } from 'react-native-router-flux';
import { BlurView } from 'react-native-blur';

const data = [
  {
    title: 'Animated 动画',
    data: [
      { title: 'Opacity', action: () => Actions.opacity() },
      { title: 'Mixture ', action: () => Actions.mixture() }
    ]
  },
  {
    title: '极光',
    data: [{ title: 'IM', action: () => Actions.jmessage() }]
  },
  {
    title: 'AMap 定位',
    data: [{ title: '定位', action: () => Actions.geolocation() }]
  },
  {
    title: '其他',
    data: [
      { title: '权限申请', action: () => Actions.permission() },
      { title: '🌳🌲树🌲🌳', action: () => Actions.tree() },
      { title: 'ImagePicker', action: () => Actions.imagePickerPage() },
      { title: '禁止截屏', action: () => Actions.flagSecure() },
      { title: '图片查看', action: () => Actions.imageViewer() }
    ]
  }
];

export default class HomePage extends Component {
  constructor(props) {
    super(props);
    this.state = { viewRef: null };
    YellowBox.ignoreWarnings(['Warning: Failed prop type']);
  }

  _renderItem = ({ item }) => {
    return (
      <TouchableOpacity
        style={styles.btn}
        onPress={() => {
          item.action();
        }}
      >
        <Text style={styles.txt}> {item.title} </Text>
      </TouchableOpacity>
    );
  };

  _renderHeader = ({ section: { title } }) => {
    return (
      <View style={styles.header}>
        <Text style={styles.headerTitle}>{title}</Text>
      </View>
    );
  };

  imageLoaded() {
    this.setState({ viewRef: findNodeHandle(this.backgroundImage) });
  }
  render() {
    return (
      <View style={styles.container}>
        <StatusBar
          translucent
          hidden={false}
          barStyle="dark-content"
          backgroundColor="transparent"
        />
        <Image
          ref={img => {
            this.backgroundImage = img;
          }}
          resizeMode="cover"
          source={{
            uri:
              'https://img1.gamersky.com/upimg/pic/2018/07/01/201807011113128645.jpg'
          }}
          style={styles.absolute}
          onLoadEnd={this.imageLoaded.bind(this)}
        />
        <BlurView
          style={styles.absolute}
          viewRef={this.state.viewRef}
          blurType="dark"
          blurAmount={1}
        />
        <SectionList
          renderItem={this._renderItem}
          renderSectionHeader={this._renderHeader}
          sections={data}
          keyExtractor={(item, index) => item + index}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: StatusBar.currentHeight,
    backgroundColor: '#fff',
    flex: 1
  },
  absolute: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0
  },
  header: {
    height: 60,
    borderBottomColor: '#FFF',
    borderBottomWidth: 1,
    backgroundColor: 'rgba(0,0,0,0.4)',
    paddingLeft: 10
  },
  headerTitle: {
    fontWeight: 'bold',
    color: '#FFF',
    lineHeight: 60,
    fontSize: 18
  },
  btn: {
    backgroundColor: 'rgba(0,0,0,0.1)',
    borderWidth: 1,
    borderColor: '#CCC',
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 5,
    margin: 20
  },
  txt: {
    color: '#FFF'
  }
});
